<template>
    <div class="list">
        <h3>小区管理</h3>
        <div>
            小区名称：
            <el-input style="width: 200px" v-model.trim="community"/>
        </div>
        <div>
            <el-button type="primary" @click="add">添加</el-button>
        </div>
        <div class="tb">
            <div style="font-weight: bold">
                <span style="display: inline-block;width: 160px">小区名称</span>小区编号
            </div>
            <div v-for="c in communityList" :key="c.community_id">
                <span>{{c.community_name}}</span><span>{{c.community_id}}</span><span><el-button @click="del(c.community_id)">删除</el-button></span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Community",
        data() {
            return {
                community: '',
                communityList: []
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            add() {
                let params = {community: this.community}
                this.$api.post('/api-insert-community', params, (res) => {
                    this.$message.success(res)
                    this.community = '';
                    this.getList()
                })
            },
            getList() {
                this.$api.get('/api-select-community', null, (res) => {
                    this.communityList = res;
                })
            },
            del(community_id){
                this.$api.get('/api-delete-community',{community_id},res=>{
                    this.$message.success(res)
                    this.getList()
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
    .list > div {
        margin-bottom: 20px;
    }

    .list > .tb {
        & > div {
            border: 1px solid #efefef;
            padding: 10px 20px;
            span:first-of-type{

            }
            span {
                display: inline-block;
                width: 160px;
            }
        }

    }
</style>
